<template>
  <div class="address">
    <s-Header :noback="noback" ccAttrs="1111" data-cc="哈哈哈" name="地址管理" @moreClick="moreClick">
      <!-- 通过action 穿透插入sHeader中popover组件action插槽中 -->
      <template #action="{action,index}">
        <p>{{ action.text+1 }}--{{ index }}</p>
      </template>
    </s-Header>
    <van-address-list
      v-if="true"
      :switchable="addressRef.switchable"
      v-model="addressRef.chosenAddressId"
      :list="addressRef.list"
      :disabled-list="addressRef.disabledList"
      disabled-text="以下地址超出配送范围"
      default-tag-text="默认"
      @add="onAdd"
      @edit="onEdit"
      @select="select"
      @edit-disabled="editDisabled"
      @select-disabled="selectDisabled"
      @click-item="clickItem"
      />    
  </div>
</template>
<script setup>
  import { reactive, ref, isRef, isReactive,nextTick, onUnmounted, onMounted, watch } from 'vue'
  import { showSuccessToast, showFailToast, showLoadingToast, closeToast, showToast } from 'vant'
  import { setLocal, getLocal } from '@/common/js/utils'
  import { getAddressList, getDefaultAddress } from '@/service/address'
  import sHeader from '@/components/SimpleHeader.vue'
  import { useRoute, useRouter } from 'vue-router'

  const router = useRouter();
  const route = useRoute();
  console.log('router...',router,route)
  const noback = ref(false);

  let addressRef = reactive({
    switchable:false,
    from: route?.query?.from ?? '',
    chosenAddressId: 21052,
    list:[ ],
    disabledList:[
      {
          id: '3',
          name: '王五',
          tel: '1320000000',
          address: '浙江省杭州市滨江区江南大道 15 号',
      },
      {
          id: '333',
          name: '王五',
          tel: '1320000000',
          address: '浙江省杭州市滨江区江南大道 15 号',
      },
    ],
  })

  watch(() => addressRef.from,(newVal,oldVal)=>{
    console.log('watch_from...',newVal,oldVal)
    if(newVal === 'create-order'){ // 当来自订单页是展示选中radio,其它页面部展示
      addressRef.switchable = true;
    } else {
      addressRef.switchable = false;
    }
  },{ 
    immediate:true, // 在侦听器创建时立即触发回调。第一次调用时旧值是 undefined
    deep:false, // 如果源是对象，强制深度遍历，以便在深层级变更时触发回调
    flush:'sync', // sync它会在 Vue 进行任何更新之前触发,post中能访问被 Vue 更新之后的所属组件的 DOM
    once:false, // 回调函数只会运行一次。侦听器将在回调函数首次运行后自动停止
    onTrack(e) { // 调试侦听器的依赖
      // debugger
    },
    onTrigger(e) {
      // debugger
    }
  })

  onMounted(()=>{
    init();
  })

  // 获取地址列表
  const init = async () => {
    const { data } = await getAddressList()
    if (!data) {
      addressRef.list = []
      return
    }
    addressRef.list = data.map(item => {
      // 设定默认地址为选中数据
      if(addressRef.from === 'create-order') addressRef.chosenAddressId = item.addressId
      return {
        id: item.addressId,
        name: item.userName,
        tel: item.userPhone,
        address: `${item.provinceName} ${item.cityName} ${item.regionName} ${item.detailAddress}`,
        isDefault: !!item.defaultFlag
      }
    })
  }
  
  // 扩展 通过参数和接口返回可使用地址及不可使用地址
  // 并不是每次订单都支持全国发货

  const goBack = () => {
    router.go(-1)
  }
  const goTo = (r, query) => {
    router.push({ path: r, query: query || {} })
  }
  
  // 测试props值向下传递是否是双向的
  const moreClick = ()=>{
    console.log(1111)
    noback.value = !noback.value;
  }

  const onAdd = (item,index) => {
    goTo('address-edit',{
      type: 'add',
      from: addressRef.from,
    })
    showToast('新增地址')
  };
  const onEdit = (item, index) => {
    console.log('onEdit...',item,index)
    showToast('编辑地址:' + index);
    goTo('address-edit',{
      type: 'edit',
      addressId: item.id,
      from: addressRef.from,
    })
  }

  const select = (item,index) => {
     console.log('select...',item,index);
     if(addressRef.from === 'create-order'){
       // 从订单页过来时选择地址,原路返回并带回选中地址
       router.push({
         path:'create-order',
         query:{
           addressId: item.id
         }
       })
     }
  };
  const editDisabled = (item,index) => {
    console.log('editDisabled...',item,index)
    
  };
  const selectDisabled = (item,index) => {
    console.log('selectDisabled...',item,index)
    showToast('以下地址超出配送范围,请选择其它')
     
  };
  const clickItem = (item,index) => {
    console.log('clickItem...',item,index)
     
  };
</script>
    
  
  <style lang="less" >
    .address{
      .van-radio-group{
        box-shadow: 1px 1px 4px 0px #ccc;
        border-radius: 6px;
        overflow: hidden;
      }
      .van-address-item~,van-address-item{
        // border-top:1px solid #ccc;
      }
      .van-address-list__disabled-text{
        text-align: center;
        padding:12px;
      }
      .van-address-item--disabled{
        box-shadow: 1px 1px 4px 0px #ccc;
      }
    }
  </style>
 